import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table,Col,Row,message } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
//引入请求
import {getHospitalListRequest,getProvinceRequest,getCityOrDistrictRequset,changeStatusRequest} from '@api/hospital/hospitalList'
//引入类型
import {getHosParamsTypes,hospitalContentType,getHosReturnContType,provinceReturnType} from '@api/hospital/model/hospitalListType' 
import { useNavigate } from 'react-router-dom'




export default function HospitalList() {
  const navigate =useNavigate()
  //创建form实例，添加到form的form属性上，获取该表单
    //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
  const[form]=Form.useForm()

  //控制表格的是否加载中的状态，要在表格组件上添加一个loading的属性
  const [isLoading, setIsLoading] = useState(false)
   //控制当前页码的状态
  const[page,setPage]=useState(1)
   //控制每页显示的条数
  const[limit,setLimit]=useState(3)
   //控制查询时用户输入的表单参数
   const[searchParams,setSearchParams]=useState<getHosParamsTypes>({})
   //控制总条数
   const[totol,setTotol]=useState(0)
   //控制表格的数据
   const[hospitalList,setHospitalList]=useState<hospitalContentType>([])
  //保存省份数据
  const[province,setProvince]=useState<provinceReturnType>([])
  //保存市级的数据，数据和省份一致，所以共用一个类型
  const[city,setCity]=useState<provinceReturnType>([])
  //保存县级的数据，数据和省份一致，所以共用一个类型
  const[district,setDistrict]=useState<provinceReturnType>([])
  //保存医院类型
  const[hospitalType,setHospitalType]=useState<provinceReturnType>([])
  //保存一个用来重新渲染的状态
  const[reRender,setReRender]=useState(true)
   
  //1.刚加载组件的时候,发送医院列表的请求
  useEffect(()=>{
    //在请求开始之前,设置isLoading为true
      setIsLoading(true)
      const getHospitalList= async()=>{
      const result = await getHospitalListRequest(page,limit,searchParams)
      //把结果中的医院列表的数组设置给状态state
      setHospitalList(result.content)
      //把结果中的医院总数设置给状态state
      setTotol(result.totalElements)
      //请求到数据之后，设置为false
      setIsLoading(false)
    }
    getHospitalList() 
  },[page,limit,searchParams,reRender])

//2.刚加载页面时，请求省份数据展示在下拉框
useEffect(()=>{
    const getProvinceList=async()=>{
       const result =  await getProvinceRequest()
      //  console.log(result)
       //把获取到的省份信息设置到state中保存
       setProvince(result)
       
       /* result是每个省份信息的对象组成的数组
          createTime: "2020-06-23 15:48:53"
          dictCode: null
          hasChildren: true
          id: 110000
          isDeleted: 0
          name: "北京市"
          param: {}
          parentId: 86
          updateTime: "2020-06-23 15:52:57"
          value: "110000"
        */
    }
    getProvinceList()
},[])
//3.刚加载页面时，请求医院类型(后端提供请求类型的接口和请求市和县的接口一样，只是拼接的参数是固定的10000)
useEffect(()=>{
  const getHosType= async()=>{
    const result = await getCityOrDistrictRequset(10000)
    //把请求回来的类型设置到state中
    setHospitalType(result)
  }

    getHosType()
},[])




//表格的字段
  const columns = [
    
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    //如果没有dataIndex设置,则render中拿到的数据就是当前完整的数据
      /* render(_: any, data: any,index:number(第三个参数是下标)) {
        return (
          <img width={100} src={`data:image/jpeg;base64,${data.logoData}`} alt="" />
        )
      } */

      //如果设置了dataIndex,则render拿到的dataIndex对应的数据
    {
      title: '医院logo',
      dataIndex: 'logoData',
      render(logoData:string){
          return <img width={100} src={`data:image/png;base64,${logoData}`} alt="" />
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      render(_:any,data:getHosReturnContType){
          return data.param.hostypeString
      }
    },
    {
      title: '详细地址',
      render(_:any,data:getHosReturnContType){
        return data.param.fullAddress
    }
    },
    {
      title: '状态',
      // dataindex只能和获取到的数据content中的属性一个一个对应，不能和嵌套的属性对应，所以要用render方法，这个状态是可以直接获取的，但state的值为0或1，我们要显示上线和下线，所以还是要用render方法做判断
      dataIndex: 'status',
      render(status:0|1){
        return status===0?'下线':'上线'
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      dataIndex: "do",
      render(_: any,data:getHosReturnContType) {
        return (
          <div>
            {/* 给查看按钮绑定点击跳转路由事件,并获取第二个参数data中的id值，拼接在跳转路由的地址上 */}
            <Button type='primary' onClick={hospitalDetailHandle(data.id)}>查看</Button>
            <Button type='primary' onClick={getHosDepartmentHandle(data.hoscode)}>排班</Button>
            <Button type='primary' onClick={changeStatusHandle(data.id,data.status===0 ? 1 : 0)}>{data.status===0?'上线':'下线'}</Button>


          </div >
        )
      }
    }
  ];

  //事件函数
  //1.点击页码重新申请数据并渲染的逻辑
  const changePageHandle=(page:number,limit:number)=>{
    setPage(page)
    setLimit(limit)
  }
  //2.选择省份改变select状态后获取该省份的value值来获取该省份的市级信息
  // 第一个参数是省份对应的value值：120000 第二个参数是一个对象：{key: '120000', value: '120000', children: '天津市'}
  const getCityHandle =async(value:number)=>{
   //传入省份的value值，去请求对应的市级
    const result = await getCityOrDistrictRequset(value)
    //再把获取到的市的信息设置给state
    setCity(result)
    //在选择省份信息后，把市级和县级的输入框中的内容清空
    //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
    form.setFieldsValue({
      cityCode:null,
      districtCode:null
    }) 
    //重新选择省份信息后，上一次选择市获取到的县级下拉框数据也要清空
    // setCity([])
    setDistrict([])

  }
  //3.选择市级改变select状态后获取该市级的value值来获取该市级的县级信息，因为是同一个接口，所以使用的是同一个请求函数
  const getDistrictHandle =async(value:number)=>{
    //传入市份的value值，去请求对应的县级信息
     const result = await getCityOrDistrictRequset(value)
     //再把获取到的县级的信息设置给state
     setDistrict(result)
    //重新选择市级信息时，需要把上一次县级的输入框内容清空
    form.setFieldsValue({
      districtCode:null
    })

   }
//4.收集表单的信息,在form上有一个onfinish属性，点击提交按钮，onfinish就会调用函数，函数接收到的形参就是用户传入的params参数
const searchHosHandle=(value:getHosParamsTypes)=>{
  // console.log(value)
  setSearchParams(value)
}
//5.点击清空，让页面数据回到初始的列表
 const clearParamsHandle =()=>{
  setSearchParams({})
  //让之前选择的市区下拉框清空
  setCity([])
 }
//6.点击查看跳转到医院详情的路由
const hospitalDetailHandle = (id:string) => {
  return()=>{
    // 路由地址拼接了id之后，在医院详情列表中可以通过id去请求对应医院的详情数据，再渲染到页面中
    navigate(`/syt/hosipital/hosipitalList/hospitalListShow/${id}`);
  }
  
};
//7.点击上线或下线按钮改变数据中的status
const changeStatusHandle =(id:string,status:0|1)=>{
  return async()=>{
      await changeStatusRequest(id,status)
      //在发送请求后修改state，进行重新渲染
      setReRender(!reRender)
      //进行提示
      message.success('修改医院状态成功')
  }
  
}
//8.点击排班跳转路由并传递hosname参数
const getHosDepartmentHandle=(hoscode:string)=>{
  return ()=>{
    navigate(`/syt/hosipital/hosipitalList/HospitalSchedule/${hoscode}`)
  }
 
}



  return (
    //让form表单栅格化，控制前六个在一行<Row></Row>,控制列的是<Col></Col>
    // gutter={10}让列与列之前有空隙
    <div>
      <Card>
        <Form
          form={form}
          name="basic"
          // wrapperCol={{ span: 30 }}
          // layout='inline'
          onFinish={searchHosHandle}
        >
        <Row gutter={10}>
          <Col span={4}>
            <Form.Item
              name="provinceCode"
            >
              <Select
                placeholder="请输入省份"
                allowClear
                // onchange可以监测到option的选中
                onChange={getCityHandle}
              >
                {/* 通过获取到的省份信息遍历生成下拉框选项，并设置value属性和key属性*/}
                {
                    province.map((item)=>{
                        return(
                          <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                        )
                    })
                }
            
              </Select>
            </Form.Item>
          </Col>
         <Col span={4}>
          {/* name是表单名称，会作为表单字段 id 前缀使用 */}
          <Form.Item
              name="cityCode"
            >
              <Select
                placeholder="请输入市"
                allowClear
                onChange={getDistrictHandle}
                
              >
                {/* value:指定当前选中的条目，多选时为一个数组。（value 数组引用未变化时，Select 不会更新） 
                    还有在表单提交时 收集的是value的值*/}
               {/* 通过获取到的市级信息遍历生成下拉框选项，并设置value属性和key属性*/}
               {
                    city.map((item)=>{
                        return(
                          <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                        )
                    })
                }
              </Select>
            </Form.Item>
         </Col>
         <Col span={4}>
          <Form.Item
              name="districtCode"
              >
              <Select
                placeholder="请输入县/区"
                allowClear
              >
               {
                district.map((item)=>{
                  return(
                    <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                  )
              })
               }
              </Select>
            </Form.Item>
         </Col>
         <Col span={4}>
          <Form.Item
              name="hosname"
               >
              <Input placeholder="医院名称" />
            </Form.Item>
         </Col>
        <Col span={4}>
            <Form.Item
                name="hoscode"
              >
                <Input placeholder='医院编号' />
              </Form.Item>
        </Col>
        <Col span={4}>
            <Form.Item
                name="hostype"
            >
                <Select
                  placeholder="医院类型"
                  allowClear
                >
                  {/*遍历类型数据，其中name就是类型  */}
                  {
                    hospitalType.map((item)=>{
                        return (
                            <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                        )
                    })
                  }
                </Select>
              </Form.Item>
        
        </Col>
         
        </Row>
        <Row gutter={10}>
            <Col span={4}>
              <Form.Item
                  name="status"
              >
                  <Select
                    placeholder="医院状态"
                    allowClear
                  >
                    <Select.Option value={1}>上线</Select.Option>
                    <Select.Option value={0}>下线</Select.Option>
                  </Select>
                </Form.Item>
            </Col>
         
        <Col span={2}>
          <Form.Item >
              <Button type="primary" htmlType="submit"  icon={<SearchOutlined />} >
                查询
              </Button>
            </Form.Item>
        </Col>
        <Col span={2} style={{marginLeft:'-16px'}}>
          <Form.Item >
              <Button type="default" htmlType="reset" onClick={clearParamsHandle} >
                清空
              </Button>
            </Form.Item>
        </Col>
          
        </Row>
      </Form>
      


        <Table
          loading={isLoading}
          style={{ marginTop: "30px" }}
          columns={columns}
          dataSource={hospitalList}
          scroll={{ x: 1100 }}
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"
          pagination={{
            //页码的配置：当前页码
            current: page,
            //总数据的数量
            total: totol,
            //每页条数
            pageSize: limit,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            showTotal(total) {
              return `总共有${total}条数据`
            },
            onChange:changePageHandle
          }}
        />
      </Card>
    </div >
  )
}

